<template>
    <div>
        <div class="filterdiv">
            <div><label class="titlefont">等级</label></div>
        </div>
        <div class="filterdiv-chose">
            <span  class="filterspan-chose"   v-for='(hiditem,index) in hiditems'  :key='index' v-on:click="addClassFun(index)" v-bind:class='{selected:index==hiditemindex}'>{{hiditem.hiditem}}</span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
      hiditemindexclear:{
          type: Number ,
          default:0
      }
    },
    data() {
      return {
        data: [] ,
        hiditems: [
            {hiditem: "重大"},
            {hiditem: "较大"},
            {hiditem: "一般"},
           ],
        dangerlevel:"",
        hiditemindex:-1,
//初始化数据
      }
    },
    methods: {
            addClassFun: function(index) {
                if(this.hiditemindex == index){
                    this.hiditemindex = -1;
                    this.$emit('setDangerlevel',"");
                    return;
                }
                this.hiditemindex = index;
                this.dangerlevel=this.hiditems[index].hiditem;
                this.$emit('setDangerlevel', this.dangerlevel);
            },
        },
     watch: {
        hiditemindexclear:{
             handler(newVal) {
                 this.hiditemindex=this.hiditemindexclear;
             }
        },
    }
}
</script>

<style>
.filterdiv{
      padding: 20px;
      padding-bottom: 10px
  }

  .titlefont{
      color:#9F9F9F;
      font-size: 13px;
  }

  .filterdiv-chose{
      padding: 20px;
      padding-top: 0px;
      padding-bottom: 0px;
  }
  .filterspan-chose{
      font-size: 13px;
      display: inline-block;
      width: 25%;
      height:18px;
      background-color: #F5F5F5;
      text-align: center;
      margin: 5px;
      border-radius: 4px;
      padding: 3px;
      border: 2px solid  #F5F5F5;
  }
  .selected{
      border: 2px solid  #3C82F6
  }
</style>